<template>
  <div class="xgplayer">
    <div id="mse" />
  </div>
</template>

<script>
import Player from 'xgplayer'
// import './.xgplayer/skin/index.js';
export default {
  name: 'VueTemplateXgplayer',
  data() {
    return {
      Player: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)
    initPlayer(url) {
      this.Player = new Player({
        'id': 'mse',
        'url': url,
        'playsinline': true,
        'whitelist': [
          ''
        ],
        'width': '600',
        'height': '337',
        'autoplay': true,
        'fluid': true,
        'playbackRate': [
          1,
          2,
          3
        ],
        'danmu': {
          'comments': [
            {
              'duration': 15000,
              'id': '2',
              'start': 3000,
              'txt': '长弹幕长弹幕长弹幕',
              'mode': 'top'
            },
            {
              'duration': 15000,
              'id': '3',
              'start': 4000,
              'txt': '长弹幕长弹幕长弹幕',
              'mode': 'bottom'
            },
            {
              'duration': 15000,
              'id': '4',
              'start': 5000,
              'txt': '长弹幕长弹幕长弹幕',
              'mode': 'scroll'
            },
            {
              'duration': 15000,
              'id': '5',
              'start': 8000,
              'txt': '长弹幕长弹幕长弹幕',
              'mode': 'scroll'
            }
          ],
          'area': {
            'start': 0,
            'end': 1
          },
          'closeDefaultBtn': true,
          'defaultOff': true,
          'panel': true
        },
        'progressDot': [
          {
            'time': 3,
            'text': 'text1'
          },
          {
            'time': 5,
            'text': 'text2'
          },
          {
            'time': 32,
            'text': 'text3'
          },
          {
            'time': 36,
            'text': 'text4'
          }
        ],
        'thumbnail': {
          'pic_num': 44,
          'width': 160,
          'height': 90,
          'col': 10,
          'row': 10,
          'urls': [
            ''
          ]
        },
        'screenShot': true,
        'download': true,
        'pip': true,
        'textTrack': [
          {
            'src': '//s0.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/textTrack-1.vtt',
            'label': '字幕1',
            'default': true
          },
          {
            'src': '//s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/textTrack-2.vtt',
            'label': '字幕2',
            'default': false
          }
        ],
        'keyShortcut': 'on',
        'closeVideoClick': true,
        'closeVideoDblclick': true,
        'closeVideoTouch': true
      })
    },
    getData() {
      this.initPlayer('https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4')
    }
  }
}
</script>

<style lang="scss" scoped>
.xgplayer {
  padding : 20px;
}

</style>
